import Taro, { Component } from '@tarojs/taro';
import {
    Text,
    View,
    Button,
    Label,
    Picker
} from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { AtIcon } from 'taro-ui';
import './index.styl';

@connect(({ router }) => ({
    ...router
}))
export default class SelectCar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selected : '',
            showKeybord: false,
            number: '',
            oilType: '0',
            oilSelector: ['92号','95号','98号','93号','97号','0号']
        };
    }
    config = {
        navigationBarTitleText: '车辆管理',
        usingComponents: {
            'car-number': '../CarNumber/index'
        }
    };
    componentDidMount(){
        const {carNumber} = this.props;
        this.setState({selected: carNumber});
    }
    addCar(){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/car/index',
            }
        });
    }
    addNewCar(){
        let {id,number,oilType,oilSelector} = this.state;
        if(!number){
            return wx.showToast({
                title: '请输入车牌号！',
                icon: 'none'
            });
        }
        oilType = oilSelector[oilType];
        oilType = Number(oilType.split('号')[0]);
        this.props.dispatch({
            type : 'car/addCar',
            payload : {
                id,
                number,
                oilType,
                callback:()=>{
                    this.props.onAddNewCar(number);
                }
            }
        });
    }
    /**
     * 临时选择车辆
     * @param {*} carNumber 
     */
    onSelect(selected){
        this.setState({selected});
    }
    /**
     * 更换车辆
     */
    changeCarModal(){
        const {disabled} = this.props;
        if(disabled) return;
        const {selected} = this.state;
        wx.setStorageSync('carNumber', selected);
        this.props.onCarSelected(selected);
    }
    /**
     * 打开输入车牌号键盘
     */
    showCarKeybord(){
        this.setState({
            showKeybord: true
        });
    }
    closeKeybord(){
        this.setState({showKeybord: false});
    }
    /**
     * 车牌号输入完毕
     * @param {*} e 
     */
    carInputFinish(e){
        console.log('车牌号:', e.detail);
        this.setState({
            number: e.detail,
            showKeybord: false
        });
    }
    /**
     * 车别名
     * @param {*} e 
     */
    onTypeChange(e){
        const value = e.detail.value;
        this.setState({
            oilType : value
        });
    }

    stopEvent(e) {
        e.stopPropagation();
    }
    render() {
        const {carList} = this.props;
        const {selected , showKeybord, number, oilType, oilSelector} = this.state;
        return (
            <View>
                {
                    carList.length ? <View className='select-car-modal' onClick={this.props.onClose.bind(this)} data-name='关闭弹窗'>
                        <View className='content' onClick={this.stopEvent.bind(this)} data-name='阻止事件冒泡'>
                            <View className='title'>
                        选择车辆
                            </View>
                            <View className='car-list'>
                                {
                                    carList.map((item) => (
                                        <Button className={item.carNumber == selected ? 'car-item select' : 'car-item'} key={selected} onClick={this.onSelect.bind(this,item.carNumber)} data-name={item.carNumber}>
                                            <Text className='car-num'>{item.carNumber}</Text>
                                            <Text className='car-sel' >选择</Text>
                                        </Button>
                                    ))
                                }
                            </View>
                            <View className='btn'>
                                <Button className='addCar' onClick={this.addCar.bind(this)} data-name='添加'><Text className='iconfont'>&#xe64f;</Text> 添加</Button>
                                <Button className='cancel' onClick={this.changeCarModal.bind(this, selected)} data-name='确 定'>确 定</Button>
                            </View>
                        </View>
                    </View> : <View className='delete-modal' onClick={this.addModalState.bind(this, false)} data-name='关闭弹窗'>
                        <View className='content' onClick={this.stopEvent.bind(this)} data-name='阻止事件冒泡'>
                            <View className='title'>
                            添加车辆
                            </View>
                            <View className='desc'>
                                <Label className='input-desc'>车牌号: </Label>
                                <View className='input-content' onClick={this.showCarKeybord.bind(this, true)} data-name='打开键盘'>{number || '请输入车牌号'} 
                                    <AtIcon value='chevron-right' size='24' color='#888' style='float: right;'></AtIcon>
                                </View>
                            </View>
                            <View className='desc'>
                                <Label className='input-desc'>油号: </Label>
                                <Picker mode='selector' className='input-content' value={oilType}  range={oilSelector} onChange={this.onTypeChange}>
                                    {oilSelector[oilType]|| '请选择汽油型号'}
                                    <AtIcon value='chevron-right' size='24' color='#888' style='float: right;'></AtIcon>

                                </Picker>
                            </View>
                            <View className='btn'>
                                <Button className='cancel' onClick={this.addModalState.bind(this, false)} data-name='取消'>
                                取消
                                </Button>
                                <Button className='sure' onClick={this.addNewCar.bind(this)} data-name='确认'> 确认  </Button>
                            </View>
                        </View>
                    </View>
                }

                {
                    showKeybord && <car-number onClose={this.closeKeybord.bind(this)} onFinish={this.carInputFinish.bind(this)} />
                }
            
            </View>
        );
    }
}
